Пример 1. Анимация изменения высоты элемента
Создайте переменную $var1 числового типа в разделе параметры мнемохемы для включения и выключения анимации.
Создайте прямоугольник с шириной 100 пикселей, разместив его на мнемосхеме с координатами (50,50), для этого укажите в полях left и top значения 50 и 50
В поле position выберем значение absolute так как используем абсолютные координаты.
Для изменения высоты прямоугольника в зависимости от значения переменной var1 введем в поле height функцию {{if($var1,100,0)}}. При значении 1 переменной var1 высота прямогольника будет равна 100 пикселей, а при значении 0 высота будет равна 0 пикселей.
Метод анимации задается в поле transition_property. Для анимации высоты необходимо выбрать height. Длительность анимации в секундах укажите в поле transition_duration, например, значение 3
Пример 2. Анимация изменения ширины элемента
Задача: создать анимацию открытия/закрытия левой двери лифта.
Создайте прямоугольник с высотой 100 пикселей. В поле top задайте значение 50, а в поле left укажите значение 200
Для изменения ширины прямоугольника в зависимости от значения переменной var1 введем в поле width функцию {{if($var1,100,0)}}. При значении 1 переменной var1 ширина прямогольника будет равна 100 пикселей, а при значении 0 ширина будет равна 0 пикселей.
Метод анимации задается в поле transition_property. Для анимации ширины необходимо выбрать width. Длительность анимации в секундах укажите в поле transition_duration, например, значение 3
Пример 3. Анимация изменения ширины элемента одновременно со сдвигом по горизонтали
Задача: создать анимацию открытия/закрытия правой двери лифта.
Создайте прямоугольник с высотой height 100 пикселей. В поле top задайте значение 50, а в поле left введем функцию изменения расстояния слева {{if($var1,300,400)}}, чтобы правая сторона прямоугольника оставалась на месте при изменении его ширины
Для изменения ширины прямоугольника в зависимости от значения переменной var1 введем в поле width функцию {{if($var1,100,0)}}. При значении 1 переменной var1 ширина прямогольника будет равна 100 пикселей, а при значении 0 ширина будет равна 0 пикселей.
Метод анимации задается в поле transition_property. Для анимации одновременно ширины и сдвига необходимо выбрать all. Длительность анимации в секундах укажите в поле transition_duration, например, значение 3
Пример 4. Анимация изменения толщины границ элемента
Задача: создать анимацию уменьшения/увеличения толщины левой и правой сторон прямоугольника.
Создайте прямоугольник с шириной и высотой 100 пикселей. В поле top задайте значение 50, а в поле left укажите значение 450
Для изменения толщины границ прямоугольника в зависимости от значения переменной var1 введем в поля border_left_width и border_right_width функцию {{if($var1,50,1)}}. При значении 1 переменной var1 толщина левой и правой сторон прямогольника будет равна 50 пикселей, а при значении 0 ширина будет равна 1 пиксель.
Метод анимации задается в поле transition_property. Для анимации толщины границ необходимо указать border-width. Длительность анимации в секундах укажите в поле transition_duration, например, значение 3
Пример 5. Анимация вращения элемента
Задача: создать анимацию вращения прямоугольника.
Создайте прямоугольник с шириной и высотой 100 пикселей. В поле top задайте значение 50, а в поле left укажите значение 600
Для анимации вращения прямоугольника в зависимости от значения переменной var1 введем в поля rotation выражение $var1. При значении 1 переменной var1 прямоугольник будет вращаться, а при значении 0 - не будет.
Скорость вращения (обороты в секунду) задается в поле rotation_speed, например, значение 1 - вращение по часовой стрелке с 1 оборотом за секунду (при отрицательном значении - вращение против часовой стрелки)
Пример 6. Анимация изменения радиуса закругления угла прямоугольника
Задача: создать анимацию преобразования квадрата в окружность.
Создайте прямоугольник с шириной и высотой 100 пикселей. В поле top задайте значение 50, а в поле left укажите значение 800
Для анимации изменения радиуса закругления угла прямоугольника в зависимости от значения переменной var1 введем в поля border_radius выражение {{if($var1,0,50)}}. При значении 1 переменной var1 закругление будет равно 0 пикселей, а при значении 0 - 50 пикселей.
Для анимации изменения угла закругления в поле transition_property укажите border-radius. Длительность анимации в секундах укажите в поле transition_duration, например, значение 3
Пример 7. Анимация изменения высоты элемента одновременно со сдвигом по вертикали
Создайте прямоугольник шириной 100 пикселей, разместив его на мнемосхеме, для этого укажите в поле left значение 50 и в поле top выражение {{if($var1,200,300)}} чтобы нижняя сторона прямоугольника визуально оставалась на месте при изменении его высоты
Для изменения высоты прямоугольника в зависимости от значения переменной var1 введем в поле height функцию {{if($var1,100,0)}}. При значении 1 переменной var1 высота прямогольника будет равна 100 пикселей, а при значении 0 высота будет равна 0 пикселей.
Метод анимации задается в поле transition_property. Для анимации одновременно высоты и сдвига по вертикали необходимо выбрать all. Длительность анимации в секундах укажите в поле transition_duration, например, значение 3
Пример 8. Анимация изменения ширины наклонного элемента одновременно со смещением по горизонтали
Создайте прямоугольник с высотой height 100 пикселей. В поле top задайте значение 220
Для изменения кооординаты в зависимости от значения переменной var1 в поле left введем функцию изменения горизонтальной координаты {{if($var1,200,250)}}, чтобы прямоугольник оставался на месте
Для наклона в поле transform_rotate укажем угол наклона фигуры 45 градусов
Для изменения ширины прямоугольника в зависимости от значения переменной var1 введем в поле width функцию {{if($var1,100,0)}}. При значении 1 переменной var1 ширина прямогольника будет равна 100 пикселей, а при значении 0 ширина будет равна 0 пикселей.
Метод анимации задается в поле transition_property. Для анимации одновременно ширины и сдвига необходимо выбрать all. Длительность анимации в секундах укажите в поле transition_duration, например, значение 3
Пример 9. Анимация изменения ширины наклонного элемента одновременно со смещением по вертикали
Создайте прямоугольник с шириной width 100 пикселей. В поле left задайте значение 400
Для изменения кооординаты в зависимости от значения переменной var1 в поле top введем функцию изменения вертикальной координаты {{if($var1,220,270)}}, чтобы прямоугольник оставался на месте
Для наклона в поле transform_rotate укажем угол наклона фигуры 45 градусов
Для изменения высоты прямоугольника в зависимости от значения переменной var1 введем в поле height функцию {{if($var1,100,0)}}. При значении 1 переменной var1 высота прямогольника будет равна 100 пикселей, а при значении 0 ширина будет равна 0 пикселей.
Метод анимации задается в поле transition_property. Для анимации одновременно высоты и сдвига необходимо выбрать all. Длительность анимации в секундах укажите в поле transition_duration, например, значение 3
Пример 10. Плавное исчезновение элемента с изменением его цвета
Создайте круг с шириной и высотой 100 пикселей.
Для изменения ширины и высоты круга в зависимости от значения переменной var1 введем в поля width и height функцию {{if($var1,0,100)}}. При значении 0 переменной var1 ширина и высота будет равна 100 пикселей, а при значении 1 ширина будет равна 0 пикселей.
Для изменения цвета круга в зависимости от значения переменной var1 введем в поля background_color и border_color функцию {{if($var1,"transparent","green")}}. При значении 0 переменной var1 круг и его граница будут зеленого цвета, а при значении 1 круг станет прозрачным.
Метод анимации all задается в поле transition_property. Длительность анимации в секундах укажите в поле transition_duration, например, значение 3
Пример 11. Включение/выключение невидимости элемента
Создайте круг с шириной и высотой 100 пикселей.
Для включения невидимости круга в зависимости от значения переменной var1 введем в поле invisible функцию $var1. При значении 0 переменной var1 круг будет виден, а при значении 1 круг станет невидимым на мнемосхеме.
Пример 12. Включение/выключение мигания элемента
Создайте круг красного цвета с шириной и высотой 100 пикселей.
Для включения режима мигания круга в зависимости от значения переменной var1 введем в поле blink функцию $var1. При значении 1 переменной var1 круг будет мигать, а при значении 0 перестанет мигать.
Пример 13. Включение/выключение режима градации серого цвета элемента
Создайте круг красного цвета с шириной и высотой 100 пикселей.
Для включения режима градации серого цвета в зависимости от значения переменной var1 введем в поле grayscale функцию $var1. При значении 1 переменной var1 круг станет серого цвета, а при значении 0 - красного цвета.
